<template>
    <view>
        <view class="topbox">
            <view class="group">
				<view class="lab">
					商家姓名
				</view>
				<view class="inp_box">
					<input type="text" v-model="reqData.Name" placeholder-class="placeholderStyle " placeholder="请填写场地名称">
				</view>
			</view>
            <view class="group_textarea">
                    <view class="title">场地描述</view>
					<u--textarea v-model="reqData.Remark" border="bottom" placeholder="请介绍下场地的具体情况" ></u--textarea>
			</view>
			<view class="img_list">
				<view class="img_box">
					<view class="img" v-for="(item, i) in imgArr" :key="i">
						<image :src="item.tempUrl" mode="aspectFill"></image>
						<view class="icon" @click.stop="delImg(i)">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode="widthFix"></image>
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view class="img addimg" @tap="upload" v-if="imgArr.length < 1">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17149633644211414.png" mode="widthFix"></image>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 1">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17149633644211414.png" mode="widthFix"></image>
					</view>
					<!-- #endif -->
				</view>
			</view>
        </view>
        <view class="middlebox">
            <view class="group" @click="showmotion = true">
				<view class="lab">运动项目</view>
				<view class="inp_box">
					<input type="text" :value="reqData.PlaceType" disabled placeholder="请选择" />
				</view>
				<view class="icon_box">
					<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
				</view>
			</view>
			<view class="group">
				<view class="lab">营业时间</view>
				<view class="inp_box" @click="showTime = true">
					<input :value="dateTime" type="text" disabled placeholder="请选择" />
				</view>
                <view>~</view>
                <view class="inp_time" @click="showendTime = true">
					<input :value="reqData.endTime" type="text" disabled placeholder="请选择" />
				</view>
				<view class="icon_box">
					<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
				</view>
			</view>
			<view class="group">
				<view class="lab">运动地址</view>
				<view @click="openMap" class="inp_box flx ball_space">
					<input v-model="ShopName" type="text" disabled placeholder="请选择" />
				</view>
				<view class="icon_box">
					<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
				</view>
			</view>
            <view class="group">
				<view class="lab">
					联系电话
				</view>
				<view class="inp_box" style="margin-right: 14rpx;">
					<input type="text" v-model="reqData.phone" placeholder-class="placeholderStyle " placeholder="请填写联系电话">
				</view>
			</view>
            <view class="group"  @click=" showway= true">
				<view class="lab">预订方式</view>
				<view class="inp_box">
					<input v-model="reqData.preway" type="text" disabled placeholder="请选择" />
				</view>
				<view class="icon_box">
					<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
				</view>
			</view>
        </view>
        <view class="veneubox">
            <view class="addbox" @click="nav_to('/pages/teacher/increase?index=1')">
                <image class="addimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715741350200599.png" mode="widthFix"></image>
                <view class="addtext">添加可预订场次</view>
            </view>
            <view v-if="venuelist.length >0" style="border-top: 1rpx solid #E4E4E4;"></view>
            <view class="listbox" v-if="venuelist.length >0">
                <view class="list" v-for="(item,index) in venuelist" :key="index">
                    <view class="name">{{item.name}}</view>
                    <view class="commison">{{'￥'+item.commison+'/h'}}</view>
                    <image class="choimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711589838636258.png"
                  mode="widthFix" @click="delField(index)"></image>
                </view>
            </view>
        </view>
        <view class="veneubox">
            <view class="addbox"  @click="nav_to('/pages/teacher/increase?index=2')">
                <image class="addimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715741350200599.png" mode="widthFix"></image>
                <view class="addtext">添加驻场助教</view>
            </view>
            <view v-if="venuelist.length >0" style="border-top: 1rpx solid #E4E4E4;"></view>
            <view v-if="teachlist.length>0" class="bt">
                <view class="teaclist"  v-for="(item,index) in teachlist" :key="index">
                    <image class="headimg" :src="item.PhotoUrl" mode="widthFix"></image>
                    <view class="content">
                        <view class="name">{{item.name}}</view>
                        <view class="resume hiddenText">{{item.Resume}}</view>
                    </view>
                    <view class="edit" @click="showedit = !showedit">编辑</view>
                    <view class="edit" @click="deledit(index)">删除</view>
                </view>
            </view>
        </view>
        <view class="btnbox">发布</view>
        <!-- 时间选择 -->
			<u-datetime-picker :minDate="minDate" ref="datetimePicker" :show="showTime" mode="time" @cancel="showTime = false" @confirm="setTime"></u-datetime-picker>
            <u-datetime-picker :minDate="minDate" ref="datetimePicker" :show="showendTime" mode="time" @cancel="showendTime = false" @confirm="setendTime"></u-datetime-picker>
			<!-- 运动项目 -->
			<u-picker :show="showmotion" immediateChange @confirm="setmotion" @cancel="showmotion = false" :columns="motiontype"></u-picker>
            <!-- 预订方式 -->
            <u-picker :show="showway" immediateChange @confirm="setpreway" @cancel="showway = false" :columns="prelist"></u-picker>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    showedit:true,
    imgArr:[],
    reqData:{
        Name:'',
        Remark:'',
        Images:'',
        PlaceType:'',
        endTime:'',
        startTime:'',
        Latitude:'',
        Longitude:'',
        Place:'',
        phone:'',   
        preway:'', // 预订方式
    },
    showmotion:false,
    //运动项目
	motiontype:[['乒乓球','羽毛球','高尔夫','网球','']],
    minDate: new Date().getTime(),
	showTime: false,
    showendTime:false,
    ShopName:'',
    showway:false,
    prelist:[['自助预订']],
    venuelist:[],
    teachlist:[],
};
},
computed:{
    dateTime() {
			if (!this.reqData.startTime) {
				return '';
			} else {
				return '周一到周日  ' + this.reqData.startTime;
			}
		},
},
onLoad(){
    uni.$on('custom', async data => {
		console.log(data,'data');
        this.venuelist.push(data)
        console.log(this.venuelist);
	})
    uni.$on('teach', async data => {
		console.log(data,'teach');
        this.teachlist.push(data)
        console.log(this.teachlist);
	})
},
onUnload() {
	uni.$off('custom')
    uni.$off('teach')
},
methods: {
    delField(index){
        this.venuelist.splice(index,1)
    },
    deledit(index){
        this.teachlist.splice(index,1)
    },
    //选择地址
		openMap(item) {
			const _this = this
			 	uni.chooseLocation({
					async success(res) {
						// console.log('res-------',res);
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d);
						_this.reqData.Latitude = res.latitude
						_this.reqData.Longitude = res.longitude
						_this.reqData.Place = res.name || d.result.address_reference.landmark_l2.title
						_this.ShopName = res.name || d.result.address_reference.landmark_l2.title
					}
				});
		},
    setpreway(e){
        this.reqData.preway = e.value[0];
			this.showway= false;
    },
    setmotion(e){
			this.reqData.PlaceType = e.value[0];
			this.showmotion= false;
		},
    setTime(e) {
			this.reqData.startTime = e.value;
			this.showTime = false;
	},
    setendTime(e){
        this.reqData.endTime = e.value;
		this.showendTime = false;
    },
    delImg(i) {
			this.imgArr.splice(i, 1);
			// this.formdata.Images.splice(i, 1);
		},
    //文件上传
		async uploading(url, tempKey) {
			console.log('url ----------' + url);

			const r = await this.$upload(url, (pro) => {
				this.imgArr.forEach((item) => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				});
			});
			this.imgArr.forEach((item) => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});

			console.log('upload file ' + r);
			// this.formdata.PhotoUrl.push(r);
			this.reqData.Images = r
		},
    upload() {
			let _this = this;
			uni.chooseMedia({
				count: 9,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {
					console.log(res);
					res.tempFiles.forEach(async (item) => {
						let o = {
							duration: 0,
							fileType: item.fileType,
							tempUrl: item.tempFilePath,
							flieUrl: item.tempFilePath,
							tempKey: uni.$u.guid(8),
							pro: 0,
						};

						_this.imgArr.push(o);

						let rex = await _this.uploading(o.flieUrl, o.tempKey);
						console.log('rex-------', rex);
					});
				},
			});
		},
        selectImg_APP() {
			let _this = this;
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								console.log(res);
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0,
									};

									_this.imgArr.push(o);

									let rex = await _this.uploading(o.flieUrl, o.tempKey);
								});
							},
						});
						return;
					}
				},
				fail: function (res) {},
			});
		},
},
created() {

},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.btnbox{
    width: 670rpx;
    height: 88rpx;
    border-radius: 44rpx;
    background-color: #706EEE;
    color: #fff;
    text-align: center;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: 72rpx;
    margin-bottom: 84rpx;
}
.topbox{
    background-color: #fff;
}
.middlebox{
    margin-top: 16rpx;
    background-color: #fff;
}
.veneubox{
    background-color: #fff;
    padding: 0 32rpx;
    box-sizing: border-box;
    .bt{
        padding-bottom: 20rpx;
    }
    .listbox{
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        margin-top: 30rpx;
        .list{
            width: 212rpx;
            height: 112rpx;
            border-radius: 8rpx;
            background-color: #F6F6F6;
            margin-right: 16rpx;
            padding: 16rpx;
            box-sizing: border-box;
            margin-bottom: 16rpx;
            position: relative;
            .name{
                font-size: 28rpx;
                color: #333333;
            }
            .commison{
                font-size: 28rpx;
                color: #333333;
            }
            .choimg{
                width: 32rpx;
                height: 32rpx;
                position: absolute;
                right: 16rpx;
                top: 42rpx;
            }   
        }
    }
    .teaclist{
        display: flex;
        align-items: center;
        margin-top: 30rpx;
        .headimg{
            width: 96rpx;
            height: 96rpx;
            border-radius: 50%;
            margin-right: 24rpx;
            margin-left: 32rpx;
        }
        .content{
            flex: 1;
            .name{
                font-size: 32rpx;
                font-weight: 600;
                color: #333333;
            }
            .resume{
                width: 300rpx;
                font-size: 28rpx;
                color: #999999;
            }
        }
        .edit{
            font-size: 28rpx;
            color: #706EEE;
            margin-right: 32rpx;
        }
    }
}
.addbox{
    background-color: #fff;
    margin-top: 16rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 108rpx;
    .addimg{
        width: 40rpx;
        height: 40rpx;
        margin-right: 16rpx;
    }
    .addtext{
        font-size: 32rpx;
        color: #706EEE;
    }
}
	.group {
		display: flex;
		align-items: center;
		height: 106rpx;
		border-bottom: 1px solid #E4E4E4;
		margin-left: 32rpx;
        padding-right: 32rpx;
         box-sizing: border-box;
		&:last-child {
			border-bottom: none;
		}

		.lab {
			padding-right: 10rpx;
			color: #333333;
			font-size: 32rpx;
		}
        .inp_time{
            width: 100rpx;
            input {
				width: 100%;
				text-align: left;
			}
			.placeholderStyle{
				color: #999999;
				font-size: 32rpx;
			}
        }
		.inp_box {
			flex: 1;
			input {
				width: 100%;
				text-align: right;
			}
			.placeholderStyle{
				color: #999999;
				font-size: 32rpx;
			}
		}

		.icon_box {
			height: 40rpx;
			width: 40rpx;
			line-height: 40rpx;
		}
	}
.group_textarea {
	height: 142rpx;
	margin-top: 30rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
    .title{
        color: #333333;
        font-size: 32rpx;
        margin-bottom: 16rpx;
    }
    .input-placeholder{
        font-size: 28rpx !important;
        color: #999999 !important;
    }
	/deep/ .u-textarea {
		background: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-bottom: none !important;
		padding: 0 !important;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #0d0d0d !important;
	}

	/deep/ .u-textarea__field {
		color: #0d0d0d !important;
		font-size: 28rpx !important;
	}
}
	.img_list {
		// padding-top: 30rpx;
		border-bottom: 1rpx solid #E4E4E4;
		// box-sizing: border-box;
		padding-bottom: 32rpx;
		// padding: 26rpx 32rpx;
		.title {
			font-size: 30rpx;
		}
		image {
			width: 100%;
			height: 100%;
		}
		.img_box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
            padding-left: 32rpx;
            box-sizing: border-box;
		}
		.videobox {
			padding: 32rpx;
			position: relative;
			> view {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
				overflow: hidden;
				video {
					width: 100%;
					height: 100%;
				}
			}
			.icon {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			margin-right: 16rpx;
			margin-top: 16rpx;
			// overflow: hidden;
			position: relative;
			image {
				border-radius: 8rpx;
			}
			.icon {
				position: absolute;
				right: -20rpx;
				top: -14rpx;
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				// border-radius: 50%;
				z-index: 999;
				image {
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
				}
			}
		}
		.img:nth-child(3n) {
			margin-right: 0;
		}
		.addimg {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #F6F6F6;
			image {
				width: 228rpx;
				height: 228rpx;
			}
		}
	}
</style>